<template>
  <el-dialog
    top="80px"
    :visible.sync="isVisible"
    :title="title"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-container>
      <el-main :style="{ 'max-height': maxHeightDialog }">
        <t-detail
          v-if="detailList.length != 0"
          :list="detailList"
          :is-title="true"
          :title="'基本信息'"
          :is-card-border="true"
        >
          <template
            v-if="item.value !== ''"
            slot="facecapture"
            slot-scope="{ item }"
          >
            <img
              :src="item.value"
              style="
                width: 120px;
                height: 120px;
                display: block;
                margin-left: 20px;
                cursor: pointer;
              "
              @click="handleImgPreview(item.value)"
            />
          </template>

          <template
            v-if="item.value !== ''"
            slot="healthCode"
            slot-scope="{ item }"
          >
            <el-tag
              size="medium"
              :style="item.value | constantKeyTagStyleObj('HEALTH_CODE')"
            >
              {{ item.value | constantKeyValue('HEALTH_CODE') }}
            </el-tag>
          </template>

          <template
            v-if="item.value !== ''"
            slot="temperature"
            slot-scope="{ item }"
          >
            <el-tag
              size="medium"
              :type="item.value < 37.2 ? 'success' : 'warning'"
            >
              {{ item.value }}℃
            </el-tag>
          </template>

          <template
            v-if="item.value !== ''"
            slot="nucleicAcidResult"
            slot-scope="{ item }"
          >
            <el-tag
              size="medium"
              :style="
                item.value | constantKeyTagStyleObj('NUCLEIC_ACID_RESULT')
              "
            >
              {{ item.value | constantKeyValue('NUCLEIC_ACID_RESULT') }}
            </el-tag>
          </template>

          <template v-if="item.value !== ''" slot="sfzh" slot-scope="{ item }">
            {{ identityCard != '' ? identityCard : item.value }}
            <span>
              <el-tooltip
                effect="dark"
                content="点击查看身份证号"
                placement="top-start"
              >
                <i
                  class="el-icon-view"
                  style="
                    color: #409eff;
                    font-size: 20px;
                    cursor: pointer;
                    margin-left: 20px;
                  "
                  @click="toShowAllSfzh()"
                ></i>
              </el-tooltip>
            </span>
          </template>
        </t-detail>
      </el-main>
      <el-footer>
        <el-button
          size="medium"
          icon="el-icon-close"
          style="width: 120px"
          @click="isVisible = false"
        >
          关闭
        </el-button>
      </el-footer>
    </el-container>

    <el-dialog
      :visible.sync="imgDialogVisible"
      :title="'人脸抓拍照片'"
      top="100px"
      width="500px"
      :append-to-body="true"
    >
      <img :src="dialogImageUrl" alt="" style="padding: 20px; width: 100%" />
    </el-dialog>
  </el-dialog>
</template>

<script>
import TDetail from '@/components/TDetail'
import dataDetailMixins from '@/mixins/data-detail-mixins'
import globalConstant from '@/utils/constants'
import EpidemicPreventionManageApi from '@/api/epidemic-prevention-manage'

export default {
  name: 'AccesseRecordsDetail',
  components: {
    TDetail,
  },
  mixins: [dataDetailMixins],
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    params: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {
      detailList: [],
      imgDialogVisible: false,
      dialogImageUrl: '',
      identityCard: '',
    }
  },
  computed: {
    isVisible: {
      get() {
        return this.dialogVisible
      },
      set() {
        this.toClose()
      },
    },
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    getDetail() {
      this.detailObj = { ...this.params.item }
      this.detailList = this.getDetailList()
    },
    getDetailList() {
      const list = [
        [
          {
            text: '人脸抓拍照',
            value: this.detailObj.facecapture,
            slotName: 'facecapture',
          },
          {
            text: '性别',
            value: globalConstant.XBDM[this.detailObj.xbdm].text,
          },
        ],
        [
          { text: '姓名', value: this.detailObj.name },
          {
            text: '身份证号',
            value: this.detailObj.sfzh,
            slotName: 'sfzh',
            isTag: false,
          },
        ],
        [
          { text: '出入场时间', value: this.detailObj.inOutTime },
          { text: '场所名称', value: this.detailObj.placeName },
        ],
        [
          {
            text: '健康码',
            value: this.detailObj.healthCode,
            slotName: 'healthCode',
            isTag: true,
          },
          {
            text: '体温',
            value: this.detailObj.temperature,
            slotName: 'temperature',
            isTag: true,
          },
        ],
        [
          {
            text: '行程卡信息',
            value: this.detailObj.tripPath,
          },
          {
            text: '行程码更新时间',
            value: this.detailObj.tripUpdateTime,
          },
        ],
        [
          {
            text: '核酸检测结果',
            value: this.detailObj.nucleicAcidResult,
            slotName: 'nucleicAcidResult',
            isTag: true,
          },

          {
            text: '核酸检测时间',
            value: this.detailObj.nucleicAcidTime,
          },
        ],
        [
          {
            text: '核酸检测机构',
            value: this.detailObj.nucleicAcidOrg,
          },
          {
            text: '',
            value: '',
          },
        ],

        [
          {
            text: '核验方式',
            value:
              globalConstant.VERIFICATION_MODE[this.detailObj.verificationMode]
                .text,
          },
          {
            text: '疫苗接种情况',
            value: this.detailObj.vaccineCount,
          },
        ],
        [
          {
            text: '检测设备',
            value: this.detailObj.deviceName,
          },
          {
            text: '设备序列号',
            value: this.detailObj.deviceSn,
          },
        ],
        [
          {
            text: '场所所在省',
            value: this.detailObj.province,
          },
          {
            text: '场所所在市',
            value: this.detailObj.city,
          },
        ],
        [
          {
            text: '场所所在区县',
            value: this.detailObj.area,
          },
          {
            text: '详细地址',
            value: this.detailObj.address,
          },
        ],

        // [{ text: '绑定场所', value: this.detailObj.placeName }],
        // [
        //   { text: '设备名称', value: this.detailObj.deviceName },
        //   { text: '设备序列号', value: this.detailObj.sn },
        // ],
        // [
        //   { text: '设备类型', value: this.detailObj.type },
        //   { text: '设备ip地址', value: this.detailObj.ip },
        // ],
        // [
        //   { text: '4G/5G MAC地址', value: this.detailObj.mobileMac },
        //   { text: 'WIFI MAC地址', value: this.detailObj.wifiMac },
        // ],
        // [
        //   { text: '以太网 MAC地址', value: this.detailObj.ethernetMac },
        //   { text: '创建时间', value: this.detailObj.createTime },
        // ],
      ]
      return list
    },
    toClose() {
      this.$emit('close')
    },

    handleImgPreview(url) {
      this.dialogImageUrl = url
      this.imgDialogVisible = true
    },

    toShowAllSfzh() {
      EpidemicPreventionManageApi.getIdentityCard({
        id: this.detailObj.id,
      }).then((res) => {
        if (res.data.code == 200) {
          this.identityCard = res.data.data
          console.log('identityCard=',this.identityCard)
        }
      })
    },
  },
}
</script>

<style scoped lang="scss">
@import '../../../../../styles/part-custom';
.detail-div {
  border: 1px solid #d5dbe0;
  border-right: 0px solid #d5dbe0;
  border-bottom: 0px solid #d5dbe0;
}
.detail-row {
  border-bottom: 1px solid #d5dbe0;
  display: flex;
}
.detail-label {
  width: 20%;
  border-right: 1px solid #d5dbe0;
  padding: 4px;
  text-align: right;
  color: #525e8c;
  background: #f9fcfd;
}
.detail-value {
  width: 30%;
  border-right: 1px solid #d5dbe0;
  padding: 4px;
}
</style>
